.page {
    background-color: #ececec;
}

.essential, .community, .attention, .code_information, .safety {
    width: 936px;
    height: 334px;
    margin-top: 20px;
    padding: 0 20px;
    display: inline-block;
    background-color: #fff;
    box-shadow: 1px 3px 13px #888888;
    -web-box-shadow: 1px 3px 13px #888888;
}

.common {
    transition: All 0.4s ease-in-out;    /*-webkit-transition:All 0.4s ease-in-out;*/

    /*-moz-transition:All 0.4s ease-in-out;*/

    /*-o-transition:All 0.4s ease-in-out;*/
}

.common:hover {

    /*transform: scale(1.03);*/

    /*-webkit-transform: scale(1.03);*/

    /*-moz-transform: scale(1.03);*/

    /*-o-transform: scale(1.03);*/

    /*-ms-transform: scale(1.03);*/
    box-shadow: 1px 3px 13px #3817ff;
    -webkit-box-shadow: 1px 3px 13px #3817ff;
}

.common h3 {
    margin: 20px 0 10px 0;
}

.sheet {
    width: 934px;
    height: 258px;
    border: 1px solid #bababa;
    background-color: #f6f6f6;
    color: #303030;
}

.outside li {
    float: left;
    width: 934px;
    height: 43px;
    line-height: 43px;
}

.outside li:nth-child(2n+1) {
    background-color: #efefef;
}

.outside li:nth-child(3) {
    border-top: 1px solid #bababa;
}

.sheet .outside .Project_name {
    background-color: #8294ff;
    color: #fff;
    display: inline-block;
    position: relative;
}

.sheet .outside .Project_name input {
    background-color: transparent;
    margin-left: 5px;
    color: #fff;
    display: inline-block;
    width: 180px;
}

.sheet .outside .Project_name i {
    background: url(../images/edit.png) 0 0 no-repeat;
    width: 14px;
    height: 15px;
    display: inline-block;
    position: absolute;
    top: 34%;
}

.sheet .outside span,.sheet .outside em{
    margin-left: 33px;
    display: inline-block;
}

.columns .pag_left, .pag_right {
    width: 46.2%;
    border-right: 1px solid #bababa;
    height: 43px;
    display: inline-block;
}

.pag_right {
    border: 0;
}

/* 社区信息 */
.community {
    height: 545px;
}

.common .counter_mark {
    border-bottom: 1px solid #bababa;
}

.common .counter_mark li {
    float: left;
    width: 500px;
    height: 100%;
    color: #333;
    font-size: 16px;
}

.common .counter_mark li:nth-child(n+1) {
    margin-left: 20px;
    width: 47%;
}

.co_chart {
    width: 100%;
    height: 390px;
}

.co_chart .contributor {
    width: 65%;
    height: 370px;
    border-right: 1px solid #bababa;
    float: left;
}

.co_chart .contributor h4 {
    background: url(../images/contributor.png) 0 0 no-repeat;
    width: 148px;
    height: 25px;
    margin: 20px 233px;
    display: inline-block;
}

.contributor span {
    background: url(../images/contributor_one.png) 0 0 no-repeat;
    width: 614px;
    height: 323px;
    display: inline-block;
    margin-left: 24px;
}

.renovate {
    position: relative;
}

.renovate .ren {
    position: absolute;
    top: 18px;
    right: 18px;
    cursor: pointer;
}

.contributory h4 {
    background: url(../images/contributory.png) 0 0 no-repeat;
    width: 123px;
    height: 25px;
    display: inline-block;
    margin: 20px 90px;
}

.co_chart .contributory {
    float: left;
    width: 34%;
    height: 390px;
}

.contributory span {
    background: url(../images/contributory_one.png) 0 0 no-repeat;
    width: 284px;
    height: 293px;
    display: inline-block;
    margin-left: 24px;
}

/* 关注度 */
.attention {
    height: 1067px;
}

.github {
    width: 100%;
    height: 330px;
    margin-top: 20px;
}

.github li {
    width: 31%;
    height: 330px;
    border: 1px solid #bababa;
    float: left;
    margin-right: 27px;
}

.github li:nth-child(3) {
    margin-right: 0;
}

.rate h4, .request h4, .Issues h4 {
    background: url(../images/G_rate.png) 0 0 no-repeat;
    width: 150px;
    height: 19px;
    margin: 20px 70px;
    display: inline-block;
}

.request h4 {
    background: url(../images/G_request.png) 0 0 no-repeat;
}

.Issues h4 {
    background: url(../images/G_Issues.png) 0 0 no-repeat;
}

.rate .G_rate {
    display: inline-block;
    margin: 8px 0 0 23px;
}

.renovate .G_request {
    display: inline-block;
    margin: 8px 0 0 34px;
}

.renovate .G_Issues {
    display: inline-block;
    margin: 8px 0 0 62px;
}

.news {
    width: 100%;
    height: 571px;
    margin-top: 20px;
}

.news li {
    width: 48.9%;
    height: 272px;
    float: left;
    overflow: hidden;
}

.color {

    /* background-color: #fc9309; */
    box-shadow: 1px 3px 13px #888888;
    -web-box-shadow: 1px 3px 13px #888888;
}

.yellow {
    margin: 0 16px 16px 0;
}

/* .green {
background-color: #5ab25e;
} */
.blue {

    /* background-color: #41cac2; */
    margin: 0 16px 16px 0;
}

/* .red {
background-color: #ff6c60;
} */
.book h4, .G_serach h4, .G_forum h4, .G_blog h4 {
    background: url(../images/G_book.png) 0 0 no-repeat;
    width: 59px;
    height: 19px;
    margin: 20px 0 0 200px;
    display: inline-block;
}

.G_serach h4 {
    background: url(../images/G_serach.png) 0 0 no-repeat;
}

.G_forum h4 {
    background: url(../images/G_forum.png) 0 0 no-repeat;
}

.G_blog h4 {
    background: url(../images/G_blog.png) 0 0 no-repeat;
}

.G_book {
    margin-left: 12px;
    display: inline-block;
}

/* 代码信息 */
.code_information {
    height: 1260px;
}

.lang li {
    width: 49%;
    float: left;
    height: 300px;
}

.lang {
    height: 300px;
    border-bottom: 1px solid #bababa;
}

.lang li:nth-child(1) {
    border-right: 1px solid #bababa;
}

.lang_o h4 {
    background: url(../images/lang.png) 0 0 no-repeat;
    width: 99px;
    height: 24px;
    margin: 20px 0 0 150px;
    display: inline-block;
}

.lang_o .lang_T {
    margin: 25px 0 0 78px;
}

.time {
    width: 960px;
    border-bottom: 1px solid #bababa;
}

.time h4 {
    background: url(../images/time.png) 0 0 no-repeat;
    width: 172px;
    height: 42px;
    margin: 20px 0 0px 400px;
    display: inline-block;
}

.time_chart {
    margin-left: 74px;
    display: inline-block;
}

.time_code h4 {
    background: url(../images/lang_code.png) 0 0 no-repeat;
    width: 148px;
    height: 25px;
    margin: 20px 0 0px 400px;
    display: inline-block;
}

.lang_code {
    margin-left: 174px;
    display: inline-block;
}

/* 安全性 */
.safety {
    height: 100%;
}

.safe_one {
    width: 66%;
    height: 325px;
    border-right: 1px solid #bababa;
    float: left;
}

.safe_two {
    width: 33.3%;
    height: 325px;
    float: left;
}

.safe_one h4 {
    background: url(../images/safe_one.png) 0 0 no-repeat;
    width: 147px;
    height: 25px;
    display: inline-block;
    margin: 20px 0 0px 245px;
}

.safe_two h4 {
    background: url(../images/safe_two.png) 0 0 no-repeat;
    width: 148px;
    height: 25px;
    display: inline-block;
    margin: 20px 0 0px 65px;
}

.safe_t_chart {
    margin: 10px 0 0 59px;
    display: inline-block;
}

.scheme {
    height: 325px;
    border-bottom: 1px solid #bababa;
}

/* 漏洞信息 */
.leak h4 {
    background: url(../images/safe_three.png) 0 0 no-repeat;
    width: 98px;
    height: 24px;
    display: inline-block;
    margin: 20px 0 0 20px;
}

.flaw_border {
    width: 924px;
    border-top: 2px solid #333;
    margin: 8px 0 0 10px;
    display: inline-block;
}

.hole li {
    float: left;
    width: 25%;
    height: 43px;
    line-height: 43px;
    text-align: center;
    color: #000;
    font-size: 18px;
}

.loophole {
    margin-bottom: 20px;
}

.loophole .loophole_color {
    height: 130px;
    border-top: 1px solid #c2c2c2;
    background-color: #eeeeee;
}

.loophole .loophole_color:nth-child(2) {
    background-color: #f5f5f5;
}

.level_h {
    color: red !important;
}

.level_m {
    color: yellow !important;
}

.level_l {
    color: blue !important;
}

.detail li {
    width: 25%;
    height: 110px;
    float: left;
    text-align: center;
    margin-top: 20px;
    color: #6d6d6e;
    font-size: 16px;
}

.detail li a {
    color: #6d6d6e;
    width: 200px;
    text-decoration: none;
    color: #8294ff;
}

.detail li:nth-child(1) {
    color: #8294ff;
    font-size: 18px;
}

.hide {
    display: none;
}

.outside li span em input{
    border: 1px solid blue;
    background: #8294ff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    padding: 8px 0;
    text-align: center;
    width: 200px;
    margin: -24px 0 0 4px;
    font-size: 14px;
}

.outside li span em.input {
    padding: 0;
    position: relative;
}

.outside li span em.hover{
    background: #8294ff;
    cursor: pointer;
}
